<template>
  <div>
    <van-tree-select
      height="55vw"
      :items="items"
      :main-active-index.sync="active"
      @click-nav="hand"
    >
      <template #content>
        <van-image
          v-if="active === 0"
          src="https://img01.yzcdn.cn/vant/apple-1.jpg"
        />
        <van-image
          v-if="active === 1"
          src="https://img01.yzcdn.cn/vant/apple-2.jpg"
        />
      </template>
    </van-tree-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      items: [
        { text: "分组 1" },
        { text: "分组 2" },
        { text: "分组 1" },
        { text: "分组 2" },
        { text: "分组 1" },
        { text: "分组 2" },
        { text: "分组 1" },
        { text: "分组 2" },
        { text: "分组 1" },
        { text: "分组 2" },
        { text: "分组 1" },
        { text: "分组 2" },
      ],
      
    };
  },
  methods: {
    hand(index) {
      console.log(index);
    }
  },
};
</script>

<style lang="less" scoped>
</style>